<template>
 <lay-layout class="Pop">

  <lay-body class="flexrow">
    <div class="w10"></div>
    <lay-field class="left" >
      <template #title>
      <span style="font-size: 16px !important;">基本信息</span>
    </template>    
  <lay-form :model="model" ref="layFormRef" class="MainForm" >   
    <lay-form-item label="账号" prop="ename" required>
            <lay-input v-model="model.ename" :disabled="!isAdd"></lay-input>
          </lay-form-item>
<lay-form-item label="姓名" prop="name" required>
            <lay-input v-model="model.name"></lay-input>
          </lay-form-item>
<lay-form-item label="" prop="editPwd" v-if="!isAdd" >
  <lay-checkbox name="like" skin="primary"  
  v-model="model.editPwd" value="1" label="修改密码"></lay-checkbox>

 
          </lay-form-item>
<lay-form-item label="密码" prop="pwd"  v-if="isAdd||model.editPwd">
            <lay-input v-model="model.pwd" type="password"
             
            ></lay-input>
          </lay-form-item>
<lay-form-item label="确认密码"  v-if="isAdd||model.editPwd" >
  <lay-input v-model="qrpwd" type="password" ></lay-input>
</lay-form-item>     

<lay-form-item label="角色"    >
  <lay-select v-model="roleSels" :options="roleList" 
  multiple allow-clear>
  </lay-select>
</lay-form-item>   


<lay-line></lay-line>
<lay-form-item label="性别" prop="sex" >
  <lay-select v-model="model.sex" :allow-clear="true">
                    <lay-select-option value="男" label="男"></lay-select-option>
                    <lay-select-option value="女" label="女"></lay-select-option> 
                  </lay-select>
          </lay-form-item>
<lay-form-item label="出生日期" prop="birthday" >
  <lay-date-picker v-model="model.birthday" simple 
      type="date" :format="'YYYY-MM-DD'"
       placeholder="日期"></lay-date-picker>
 
          </lay-form-item>
<lay-form-item label="职务" prop="zw" >
            <lay-input v-model="model.zw"></lay-input>
          </lay-form-item>
<lay-form-item label="手机号" prop="mobile" >
            <lay-input v-model="model.mobile"></lay-input>
          </lay-form-item>
<lay-form-item label="邮箱" prop="email" >
            <lay-input v-model="model.email"></lay-input>
          </lay-form-item>
<lay-form-item label="住址" prop="address" >
            <lay-input v-model="model.address"></lay-input>
          </lay-form-item>
<lay-form-item label="备注" prop="memo" >
          <lay-textarea  v-model="model.memo"></lay-textarea>

          </lay-form-item>


  </lay-form>
    
</lay-field>
<div class="w10"></div>
<lay-field   class="right" >
      <template #title>
      <span style="font-size: 16px !important;">照片</span>
    </template>   
     <div style="width:100%;height:300px;">
      <MyImgUpOne v-model="model.url"></MyImgUpOne>
     </div>
    

</lay-field>    
<div class="w10"></div>
    </lay-body>
    <lay-footer>
     
      <lay-button size="sm" type="primary" @click="toSubmit"
            >保存</lay-button
          >
          <lay-button size="sm" @click="toCancel" style="margin-left:40px;">取消</lay-button>
    </lay-footer>
  </lay-layout>

</template>

<script lang="ts">
import { ref, watch,reactive,onMounted,h } from 'vue'
import { layer } from '@layui/layer-vue'
import MyHttp from "../../library/MyHttp";  
import MyWin from "../../library/MyWin"; 
import MyPage from "../../library/MyPage"; 
import {MyExcel} from "../../library/MyExcel"; 
import {MySimpleExport,TableColumn} from "../../library/MySimpleExport"; 
import MyData from "../../library/MyData";  
import MyImgUpOne from "../component/MyImgUpOne.vue";  

export default {
  props:{
      data:Object,
      isAdd:Boolean
  },
  components: {  MyImgUpOne },

  setup(prop:any, context:any) {
    const baseUrl="/htuser";
    const myWin=ref<any>(null);
    const model = reactive<any>(prop.data )
    const layFormRef = ref<any>()     
    const toSubmit=async()=>{
      layFormRef.value.validate((isValidate:boolean, model:any, errors:Array<any>) => {
          if(!isValidate){
            let msg='';
            errors.forEach(element=>{ 
              msg+=`${element.message}
              `; 
            })
            
            MyWin.alert(msg,{});
            return;
          }
          
          if(prop.isAdd ||model.editPwd){
              if(!model.pwd){
                MyWin.alert("密码不能为空",{});
                return;
              }

              if(model.pwd!=qrpwd.value){
                MyWin.alert("两次密码不同",{});
                return;
              }
               
          }

          if(roleSels.value.length==0){
                MyWin.alert("必须选择角色",{});
                return;
          }
          model.roleList=[];
          roleSels.value.forEach((element: any) => {
            var di=MyData.getById(roleList.value,element);
            model.roleList.push(di);
          });

          save();
      });
    } 
    const toCancel=()=>{ 
      context.emit("cancel");  
      myWin.value.close();
    }
    const save=async()=>{
      let url=baseUrl+"/Insert";
      if(!prop.isAdd){
        url=baseUrl+"/update";
      }
      var r=await new MyHttp().post(url,model,
        { 
        }
      ); 
      context.emit("ok",model); 
      myWin.value.close();  
    }

 
    
    const platList=ref<Array<any>>(); 
    const platListQuery=async()=>{
      var r= await new MyHttp().post("/htplat"+"/list",{},
              { 
              }
            ); 
      MyData.toLayOptions(r.data)
      platList.value= r.data; 
       
       
    }
    const platChange=(data:any)=>{
      
    }

    const dataSource=ref<any>();
    const queryMenu=async (pageIndex:number) =>{
      let qm={
        Id:model.htplatId
      }
       
      var r=await new MyHttp().post("/htmenu"+"/GetTree",qm,
        { 
        }
      ); 
      MyData.toLayTree(r.data); 
      dataSource.value=r.data;  
      expandAll(true) ;
    } 

    const expandKeys=ref<any>([]);
    const expandAll=(expanded:boolean)=>{
        if(expanded){
          expandKeys.value=MyData.getTreeIds( dataSource.value) ;
        }
        else{
          expandKeys.value=[];
        }
    }
    const qrpwd=ref<any>();
   
    const roleSels=ref<any>([]);
    const roleList=ref<any>([]);
    prop.data.roleList.forEach((element: { id: any; }) => {
      roleSels.value.push(element.id);
    });
    const roleQuery=async()=>{
      let qm2={
        id:prop.data.crtDid
      } 
      var r=await new MyHttp().post("/htrole"+"/listByDeptId",qm2,
        { 
        }
      ); 
      MyData.toLayOptions(r.data);
      roleList.value=r.data; 
    }
    onMounted(() =>{  
      console.info("add mount")
      myWin.value=new MyWin();
      // if(prop.isAdd){
      //   platListQuery();
      // }
      roleQuery();
     // queryMenu(0);
    });
    return {
      model,
      layFormRef,
      toSubmit,
      toCancel, 

      platList, 
      platChange,

      dataSource,
      queryMenu,

      expandKeys,
      expandAll,

      qrpwd,

      roleSels,
      roleList,
      roleQuery 

    }
  }
}
</script>
<style scoped>
.Pop .layui-footer,
.Pop .layui-header {
  height: 50px;
  text-align: center; 
  padding-top:10px;
}  
.Pop .layui-body{
  justify-content:start;
}
.MainForm{
  margin: 0px;
  width:100%;
} 
.left 
{ 
  width: 500px;
}
.right{
  
  flex:1;
  
}
.w10{
  width:10px;
}
.right .TBMain{
  width:380px;
}
.right .layui-form-label{
  width:60px;
}
.right .layui-form-item{
  margin-bottom: 5px;
}

 
.Item{
  border-bottom:1px dashed var(--global-neutral-color-5) ;
  margin-top:10px;
}
.Item:hover  {
  box-shadow: 2px 2px 14px #ccc;
  cursor: pointer;
}
.Item:hover i{
  display: inline;
}
</style>